<template>
  <input type="text" v-model="myname">
  <ul>
    <li v-for="item in computedList" :key="item">{{item}}</li>
  </ul>
</template>
<script>
import { computed, onMounted } from '@vue/runtime-core'
import { ref } from 'vue'
export default {
  setup () {
    const myname = ref('')
    const list = ref([])
    const computedList = computed(() => {
      return list.value.filter(a => a.includes(myname.value))
    })
    onMounted(() => {
      fetch('/test.json')
        .then(res => res.json())
        .then(res => {
          list.value = res.list
        })
    })
    return {
      myname, computedList
    }
  }
}
</script>
